<template>
    <a-drawer title="组件库">
        <a-row :gutter="[16, 16]">
            <a-col
                :lg="12"
                :sm="24"
                v-for="i in data"
                :key="i"
                @dragstart="dragstart(i)"
                @drag="drag(i)"
                @dragend="dragend"
                :draggable="true"
            >
                <a-tag class="ml-component-tag">
                    {{ i.compontName }}
                </a-tag>
            </a-col>
        </a-row>
    </a-drawer>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref } from "vue";
import { NodeAttrType } from "../../type/index";
export default defineComponent({
    setup() {
        const data = inject("componnetsData");
        const handleSelectStart = inject<Function>("handleSelectStart");

        const drag = () => {};
        const dragstart = (row: NodeAttrType) => {
            handleSelectStart && handleSelectStart(row);
        };
        const dragend = () => {};

        return {
            data,
            drag,
            dragstart,
            dragend,
        };
    },
});
</script>


<style lang="less" scoped>
.ml-component-tag {
    cursor: pointer;
    user-select: none;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
}
</style>